ModalDialog

Modal dialog.

Interface: IModalDialog.

See the parameters of this component in storybook.

To change the modal dialog type, use ModalDisplayType (modal or aside).

Extra parameters

fullScreen

Specifies whether to display the modal dialog body in the full screen mode without paddings.

Type: boolean

Example: true

Example

import {Actions, Components, type IBox, type IFrame, type IMessage, type IModalDialog, type ISkeleton, ModalDisplayType} from "@onlyoffice/docspace-plugin-sdk"

export const frameProps: IFrame = {
  width: "100%",
  height: "100%",
  name: "test-drawio",
  src: "",
}

const skeletonProps: ISkeleton = {
  width: "100%",
  height: "100%",
}

const body: IBox = {
  widthProp: "100vw",
  heightProp: "calc(var(--vh, 1vh) * 100)",

  children: [
    {
      component: Components.iFrame,
      props: frameProps,
    },
  ],
}

const bodySkeleton: IBox = {
  widthProp: "100vw",
  heightProp: "calc(var(--vh, 1vh) * 100)",
  children: [
    {
      component: Components.skeleton,
      props: skeletonProps,
    },
  ],
}

export const drawIoModalDialogProps: IModalDialog = {
  dialogHeader: "",
  dialogBody: body,
  displayType: ModalDisplayType.modal,
  onClose: () => {
    const message: IMessage = {
      actions: [Actions.closeModal],
    }

    return message
  },

  onLoad: async () => {
    return {
      newDialogHeader: drawIoModalDialogProps.dialogHeader,
      newDialogBody: drawIoModalDialogProps.dialogBody,
    }
  },
  autoMaxHeight: true,
  autoMaxWidth: true,
}